<template>
  <div v-if="type == 'drag'">
    <a-upload-dragger
      v-if="reload"
      ref="upload"
      name="file"
      :multiple="true"
      :file-list="fileList"
      :remove="handleRemove"
      :before-upload="beforeUpload"
      :customRequest="handleChange"
    >
      <p class="ant-upload-drag-icon">
        <a-icon type="inbox" />
      </p>
      <p class="ant-upload-text">
        点击或拖入文件上传
      </p>
    </a-upload-dragger>
  </div>
  <div v-else>
    <a-upload
      v-if="reload"
      ref="upload"
      list-type="picture-card"
      :multiple="false"
      :file-list="fileList"
      :remove="handleRemove"
      @preview="handlePreview"
      :before-upload="beforeUpload"
      :customRequest="handleChange"
    >
      <div v-if="fileList.length < limit">
        <a-icon type="plus" />
        <div class="ant-upload-text">
          上传
        </div>
      </div>
    </a-upload>
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import { upload } from '@/api/oss';
import cloneDeep from 'lodash/cloneDeep';

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

export default {
  props: {
    type: {
      type: String,
      default: ''
    },
    limit: {
      ype: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList: [],
      reload: true
    };
  },
  computed: {

  },
  methods: {
    setURL(url) {
      this.fileList = cloneDeep(url);
      this.reload = false;
      this.$nextTick(() => {
        this.reload = true;
      });
      console.log(url);
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      // this.previewImage = file.url || file.preview;
      // this.previewVisible = true;
    },
    getImgList() {
      console.log(this.fileList, 'this.fileListhis.fileLis');
      const file = cloneDeep(this.fileList);
      if (file.length) {
        this.$emit('change', file.filter(e => e.response).map(e => {
          return e.response.data.map(e => {
            return {
              ...e,
              url: e.imgUrl
            };
          });
        }));
      }
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
      this.getImgList();
    },
    beforeUpload(file) {
      // console.log(file);
      this.fileList = this.fileList.concat([file]);
      // return false;
    },
    handleChange(e) {
      console.log('change', e);
      const { file } = e;

      console.log(file, 'fileeee');
      const formData = new FormData();
      file.status = 'uploading';
      formData.append('file', file);

      upload(formData, (percent) => {
        // file.percent = percent;
        // e.onProgress({ percent }, file);
      }).then(res => {
        console.log(res);
        console.log('上传成功');
        file.url = res.data.imgUrl;
        e.onSuccess(res.data.imgUrl);
        this.getImgList();
      }).catch((err) => {
        e.onError(err);
      });

      // You can use any AJAX library you like

      // reqwest({
      //   url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      //   method: 'post',
      //   processData: false,
      //   data: formData,
      //   success: () => {
      //     this.fileList = [];
      //     this.uploading = false;
      //     this.$message.success('upload successfully.');
      //   },
      //   error: () => {
      //     this.uploading = false;
      //     this.$message.error('upload failed.');
      //   },
      // });
    }
  }
};
</script>
